<template>
  <div>
    <el-dialog :title="'选择分配角色'" :visible.sync="Configuration" width="650px" :append-to-body="true" :close-on-click-modal="false">
      <p class="checked">当前选择：{{test.data}}</p>
      <el-tree
        ref="treeForm"
        :data="data"
        show-checkbox
        accordion
        check-strictly
        default-expand-all
        node-key="id"
        highlight-current
        :props="defaultProps"
        @node-click="nodeClick"
        @check="handleCheckChange"
        @check-change="handleNodeClick"
      />

      <div slot="footer">
        <el-button @click="returns()">取 消</el-button>
        <el-button type="primary" v-throttle="[save]">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { batchImport } from "@/views/wy-flow/api/actreprocdef";
import dbl from '@/utils/dbl'
import axios from 'axios'

export default {
  name: "flow-role",
  data () {
    return {
      Configuration: false,
      data: [{
        id: -1,
        label: '居民家庭经济状况核对中心',
        children: []
      }],
      defaultProps: {
        children: 'children',
        label: 'label',
        roleDesc: 'roleDesc',
        roleCode: 'roleCode',
        delFlag: 'delFlag'
      },
      index: "",
      CheckChange: [],
      test: { userId: "", data: "", index: '' }

    }
  },
  methods: {
    save () {
      this.$emit('loadsuc', this.test);
      this.returns()
    },
    returns () {
      this.Configuration = false
      this.test = { userId: "", data: "", index: '' }
    },
    nodeClick (data, checked) {
      checked.checked = true
      // let node=this.$refs.treeForm.getNode(data);
      // node.checked=true
      this.test.data = data.label
      this.test.userId = data.id
    },
    handleCheckChange (data, checked) {
      this.CheckChange = checked.checkedNodes
      this.test.data = this.CheckChange[0].label
      this.test.userId = this.CheckChange[0].id

    },
    handleNodeClick (data, checked, node) {
      if (checked === true) {
        this.checkedId = data.id;
        this.$refs.treeForm.setCheckedKeys([data.id]);
      } else {
        if (this.checkedId == data.id) {
          this.$refs.treeForm.setCheckedKeys([data.id]);
        }
      }
    },
    show (data) {
      this.index = data
      this.test.index = this.index
      this.Configuration = true
      this.getList()
    },
    getList () {
      this.data = [{
        id: -1,
        label: '居民家庭经济状况核对中心',
        children: []
      }]
      const config = {
        headers: { 'Authorization': dbl.get('token'), }
      }
      axios.get("/api/flowTaskResultAssignee/getSysRoles", config).then(response => {
        var k = response.data.data;
        for (var i = 0; i < k.length; i++) {
          var datas = {}
          datas.id = k[i].roleId
          datas.label = k[i].roleName
          datas.roleDesc = k[i].roleDesc
          datas.roleCode = k[i].roleCode
          datas.delFlag = k[i].delFlag
          this.data[0].children.push(datas)
        }
      }).catch(e => {

      })
    },
  }
}
</script>

<style scoped lang='scss'>
@include formWrap(4);
.checked {
  margin-bottom: 20px;
  font-size: 15px;
}
</style>

